<template>
  <div>
    <PageContainer>
      <div class="flex flex-col items-center justify-center">
        <div class="text-[16px] color-333">订单核销</div>
        <div class="text-[14px] color-666 mt-[6px]">请输入订单内核销码</div>
        <div class="mt-[20px]">
          <el-input
            link
            v-model="code"
            placeholder="请输入订单核销券码"
            class="!w-[300px] !text-center writeoffinput"
            :input-style="{ textAlign: 'center' }"
          />
        </div>
        <div class="mt-[20px]">
          <el-input
            link
            v-model="phoneSuffix"
            placeholder="请输入手机号后四位"
            class="!w-[300px] !text-center"
            :input-style="{ textAlign: 'center' }"
          />
        </div>
        <div class="mt-[20px]">
          <el-button type="primary" class="px32" @click="handleWriteoff">核销</el-button>
        </div>
      </div>
      <el-divider style="border-top: 10px solid #f7f7f7" />
      <div>
        <div class="title">订单核销记录</div>
        <div class="search-list">
          <div class="left">
            <div class="item">
              <div class="label">核销时间</div>
              <el-date-picker
                v-model="searchParams.startTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </div>
            <div class="item">
              <div class="label">客户</div>
              <el-input
                v-model="searchParams.keyword"
                style="width: 240px"
                placeholder="请输入"
                :suffix-icon="Search"
              />
            </div>
            <div class="item">
              <div class="label">核销状态</div>
              <el-checkbox-group v-model="searchParams.status">
                <el-checkbox label="1">已核销</el-checkbox>
                <el-checkbox label="2">已撤销</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="table-wrap">
          <el-table :data="tableData">
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="orderNo" label="订单号" />
          </el-table>
        </div>
      </div>
    </PageContainer>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
// 核销券码
const code = ref('')
// 手机尾缀
const phoneSuffix = ref('')
//
// 核销
const handleWriteoff = () => {
  console.log('code', code.value)
  console.log('phoneSuffix', phoneSuffix.value)
}
// 查询form
const searchParams = reactive({
  startTime: '',
  endTime: '',
  keyword: '',
  status: [],
})
// 表格数据
const tableData = ref([])
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}
</style>
